<script setup>
import Demo12PropsDemo02Children01 from './demo12-props-demo02-children01.vue';
import Demo12PropsDemo02Children02 from './demo12-props-demo02-children02.vue';
import Demo12PropsDemo02Children03 from './demo12-props-demo02-children03.vue';
</script>
<template>
  <h2>demo12-props-demo02.vue</h2>
  <zhtt-card title="子组件通过$attr，访问父组件在自己上面添加的属性">
    <Demo12PropsDemo02Children01 n="12" b="18" age="19"></Demo12PropsDemo02Children01>
  </zhtt-card>
  <zhtt-card title="子组件通过$attr，访问父组件在自己上面添加的属性"  footer="子组件中，具有有change事件的节点，必须为子组件中的根节点。如果有多个根节点，需要参考下面一个示例，进行显示绑定。">
    demo02Result：{{JSON.stringify(demo02Result)}}<br/>
    <Demo12PropsDemo02Children02  @change="showChange"></Demo12PropsDemo02Children02>
  </zhtt-card>
  <zhtt-card title="v-bind=$attrs"  footer="子组件中未添加class，是通过父组件传递进去进行的绑定">
    <Demo12PropsDemo02Children03 class="zhtt-input"></Demo12PropsDemo02Children03>
  </zhtt-card>
</template>

<script>
export default {
  data(){
    return {
      demo02Result:null
    }
  },
  methods:{
    showChange(event){
      this.demo02Result = event;
      console.log('demo02Result：', this.demo02Result);
    }
  }
}
</script>

<style scoped>

</style>